<template>
    <div>
      <m-head title="我的课程"></m-head>
      <div class="container">
        <div class="videobox">
          <video :src="currentVideo.content" controls></video>
        </div>
        <div class="list">
          <ul>
            <li class="item" v-for="(item, id) in list" v-bind:key="id">
              <!--<h4  @click="onToggle(id, item.show)">-->
                <!--<img src="../../static/images/c-menu-ico.png" alt="">-->
                <!--<span class="name">{{item.name}}</span>-->
                <!--<i :class="item.show?'up':''"></i>-->
              <!--</h4>-->
              <div class="con">
              <p @click="onplay(id)" :class="(currentVideo.id===item.id)?'active':''">{{item.name}}</p>
              </div>
              <!--<div class="con" v-for="(subitem, subid) in item" v-bind:key="subid" v-show="item.show">-->
                <!--<p @click="onplay(id, subid)" :class="(currentVideo.id===id&&currentVideo.subid===subid)?'active':''">{{subitem.name}}</p>-->
              <!--</div>-->
            </li>
          </ul>
        </div>
      </div>
    </div>
</template>

<script>
import MHead from './MHeader'
import * as info from '../api/info'
export default {
  name: 'my-course-detail',
  components: {
    'm-head': MHead
  },
  mounted () {
    this.getInfo()
  },
  methods: {
    onToggle: function (id, value) {
      this.$data.lists[id].show = !value
    },
    onplay: function (id) {
      this.currentVideo = this.list[id]
    },
    getInfo () {
      let that = this
      const id = this.$route.query.id
      info.getCourseCatalog(id).then(res => {
        that.list = res.data
      })
      console.log(that.list)
    }
  },
  data: function () {
    return {
      list:{},
      currentVideo: {
        id: '',
        subid: '',
        source: '../../static/images/gongnengyanshi.mp4'
      },
      lists: [
        {
          show: false,
          id: 1,
          name: '第一模块 社交能力',
          children: [
            {
              id: 1,
              subtitle: 'Unit 1. My Name Is...我的名字是...',
              source: '../../static/images/gongnengyanshi.mp4'
            },
            {
              id: 2,
              subtitle: 'Unit 2. How Are You 你好吗？',
              source: '../../static/images/gongnengyanshi.mp4'
            },
            {
              id: 3,
              subtitle: 'Unit 3. He or She Is from…他或她来自...',
              source: '../../static/images/gongnengyanshi.mp4'
            },
            {
              id: 4,
              subtitle: 'Unit 4. Happy Birthday! 生日快乐！',
              source: '../../static/images/gongnengyanshi.mp4'
            },
            {
              id: 5,
              subtitle: 'Unit 5. Nice to Meet You！ 见到你很高兴！',
              source: '../../static/images/gongnengyanshi.mp4'
            }
          ]
        },
        {
          show: false,
          id: 2,
          name: '第二模块 认知能力',
          children: [
            {
              id: 1,
              subtitle: 'Unit 1. My Name Is...我的名字是...',
              source: '../../static/images/gongnengyanshi.mp4'
            },
            {
              id: 2,
              subtitle: 'Unit 2. How Are You 你好吗？',
              source: '../../static/images/gongnengyanshi.mp4'
            },
            {
              id: 3,
              subtitle: 'Unit 3. He or She Is from…他或她来自...',
              source: '../../static/images/gongnengyanshi.mp4'
            },
            {
              id: 4,
              subtitle: 'Unit 4. Happy Birthday! 生日快乐！',
              source: '../../static/images/gongnengyanshi.mp4'
            },
            {
              id: 5,
              subtitle: 'Unit 5. Nice to Meet You！ 见到你很高兴！',
              source: '../../static/images/gongnengyanshi.mp4'
            }
          ]
        },
        {
          show: false,
          id: 3,
          name: '第三模块 Body and Feelings 身体及感受',
          children: [
            {
              id: 1,
              subtitle: 'Unit 1. My Name Is...我的名字是...',
              source: '../../static/images/gongnengyanshi.mp4'
            },
            {
              id: 2,
              subtitle: 'Unit 2. How Are You 你好吗？',
              source: '../../static/images/gongnengyanshi.mp4'
            },
            {
              id: 3,
              subtitle: 'Unit 3. He or She Is from…他或她来自...',
              source: '../../static/images/gongnengyanshi.mp4'
            },
            {
              id: 4,
              subtitle: 'Unit 4. Happy Birthday! 生日快乐！',
              source: '../../static/images/gongnengyanshi.mp4'
            },
            {
              id: 5,
              subtitle: 'Unit 5. Nice to Meet You！ 见到你很高兴！',
              source: '../../static/images/gongnengyanshi.mp4'
            }
          ]
        }
      ]
    }
  },
}
</script>

<style scoped>
.videobox{
  width: 100%;
  border-bottom: 1px solid #ddd;
}
.videobox video{
  width: 100%;
  display: block;
}
.item h4{
  display: flex;
  align-items: center;
  height: 1.2rem;
  background: #ECF0F3;
  padding: 0 .3rem;
  border-bottom: 1px solid #ddd;
}
.item h4 img{
  width: .5rem;
  margin-right: .2rem;
}
.item h4 .name{
  font-size: .42rem;
  color: #333;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex-grow: 1;
  width: 6rem;
}
.item h4 i{
  border-right: 1px solid #555;
  border-bottom: 1px solid #555;
  width: 10px;
  height: 10px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  position: relative;
  top: -2px;
}
.item h4 i.up{
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
  top: 2px;
}
.con{
  padding: 0 .3rem;
}
.con p{
  height: 1rem;
  line-height: 1rem;
  font-size: .38rem;
  color: #333;
  border-bottom: 1px solid #ddd;
  padding-left: .2rem;
}
.con p:last-child{
  border-bottom: none;
}
.con p.active{
  color: #0a59c9;
}

</style>
